import React, { useState, MouseEvent } from 'react'
import { Tabs,Select  } from 'antd';
import {
  connect
} from 'react-redux'
import {
  setDefaultSelectedKeys,
  setDefaultOpenKeys
} from 'store/actions'

import { MenuList,cooperationList } from './index';
import './menu.scss'
import Menu from '../Menu/index';

const { TabPane } = Tabs;
const { Option } = Select;
const selectIcon = require('./images/switch_faded.png')

interface Imenu {
  defaultSelectedKeys: Array<string>,
  defaultOpenKeys: Array<string>,
  dispatch: any,
}
const SelectIcon:React.FC=()=>{
  return <img src={selectIcon} alt=""/>
}

function LeftMenu(props: Imenu) {
  const { defaultSelectedKeys, defaultOpenKeys, dispatch } = props;
  function openKeys(index: any) {
    dispatch(setDefaultSelectedKeys(JSON.stringify(index)));
  }
  const onOpenChange = (openKeys: any) => {
    const openKey: Array<string> = openKeys;
    dispatch(setDefaultOpenKeys(openKey));
  }
  const callback=()=>{
    console.log(123);
  }
  return (
    <div className='menu'>
       <Tabs defaultActiveKey="1" onChange={callback}>
        <TabPane tab="个人空间" key="1">
          <Menu menuList={MenuList} openKeys={openKeys} onOpenChange={onOpenChange} defaultKeys={defaultOpenKeys}/>
        </TabPane>
        <TabPane tab={
           <Select defaultValue="1" style={{ width: 120 }} bordered={false} suffixIcon={SelectIcon}>
              <Option value="1">协作空间</Option>
              <Option value="2">天赋树</Option>
              <Option value="3">哈哈哈哈的协作空间</Option>
         </Select>
        } key="2">        
          <Menu menuList={cooperationList} openKeys={openKeys} onOpenChange={onOpenChange} defaultKeys={defaultOpenKeys}/>

        </TabPane>
      </Tabs>

    </div>
  )
}


export default connect(
  function mapStateToProps(state: any) {
    const { defaultSelectedKeys, defaultOpenKeys } = state;
    return {
      defaultSelectedKeys: defaultSelectedKeys,
      defaultOpenKeys: defaultOpenKeys
    }
  },
  function mapDispatchToProps(dispatch) {
    return { dispatch }
  }
)(LeftMenu)